<template>
  <div class="skills-page">
    <div class="skills-box" :class="classObj">
      <div id="frount"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default {
  name: 'skills',
  computed: {
    ...mapState({
      device: state => state.app.device,
    }),
    classObj() {
      console.log('this.device=', this.device);
      return {
        mobile: this.device === 'mobile',
      };
    },
  },
  mounted() {
    const myChart = echarts.init(document.getElementById('frount'));
    myChart.setOption({
      title: {
        textAlign: 'auto',
        padding: [15, 15],
        textStyle: {
          color: 'rgba(255, 255, 255, 0.6)',
          fontWeight: 'bolder',
          fontSize: 20,
        },
      },
      backgroundColor: 'rgba(255, 255, 255, 0.2)',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)',
      },
      label: {
        textStyle: {
        },
      },
    });
    // // 绘制图表
    myChart.setOption({
      title: {
        text: '前端技能',
      },
      tooltip: {},
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'ddd'],
        axisTick: {
          alignWithLabel: true,
        },
      },
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          type: 'bar',
          barWidth: '40%',
          data: [20, 10, 50, 80, 70, 10, 30, 90],
          itemStyle: {
            normal: {
              color() {
                return `#${Math.floor(
                  Math.random() * (256 * 256 * 256 - 1),
                ).toString(16)}`;
              },
            },
          },
        },
      ],
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.skills-page {
  width: auto;
  height: 100%;
  color: #fff;
  .skills-box {
    display: flex;
    justify-content: space-around;
    & > div {
      width: 20vw;
      height: 20vw;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.6);
    }
  }
}
</style>
